﻿<!DOCTYPE html>

<html>
<head>
<title></title>
<script type="text/javascript">
    var _LoadImage = []; ///<summary>加载完成的Image对像数组</summary>
    var _NextImageIndex = 0; ///<summary>下次要显示的图片在_LoadImage的索引位置</summary>
    function LoadImageURL(ImageCount) {
        ///<summary>初始化的时候要得到所有图片的地址</summary>
        ///<param name="ImageCount" type="number">图片的个数</param>
        var _InitImageURL = [];
        for (var i = 0; i < parseInt(ImageCount); i++) {
            var _url = "Image/" + (i + 1).toString() + ".jpg";
            _InitImageURL.push(_url);
        }
        LoadImage(_InitImageURL);
    } 
    function LoadImage(ImageURL) {
        ///<summary>用图片地址初始化Image对像</summary>
        ///<param name="ImageURL" type="array">图片的地址数组</param>
        while (ImageURL.length != 0) {
            var img = new Image();
            img.src = ImageURL.pop();
            img.onload = function () {
                _LoadImage.push(this);
                PushMsg("Push _LoadImage:" + this.src);
                if (_LoadImage.length == 11) {
                    ImageSwitch.Images = _LoadImage;
                    ImageSwitch.Canvas = document.getElementById("CanvasSwitch");
                    ImageSwitch.Show();
                }
            }
        }
    }
    function PushMsg(message) {
        ///<summary>日志输出</summary>
        ///<param name="message" type="string">日志内容</param>
        var _span = document.createElement("span");
        _span.innerText = message;
        var msg = document.getElementById("msg");
        msg.appendChild(_span);
        var _br = document.createElement("br");
        msg.appendChild(_br);
    }
    window.onload = function () {
        LoadImageURL(11);
    }

    var ImageSwitch = new Object();
    ImageSwitch.WidthCount = 11;//在X坐标上分成几等份
    ImageSwitch.HeightCount = 8;//在Y坐标上分成几等份
    ImageSwitch.Canvas = new Object();//Canvas标记对象
    ImageSwitch.Images = [];//要显示的图片对象
    ImageSwitch.NextImageIndex = 0;//下个要显示的图片对象在Images中的索引位置
    ImageSwitch.SwitchTime = 1000;//图片切换效果用时(1S=10000)
    ImageSwitch.ShowTime = 2000; //一个图片坐切换开始到切换另一个图片所用的时间
    ImageSwitch.isHeightType = true;//true:以垂直方向显示,false:以水平方向显示
    ImageSwitch.Current = new Object();
    ImageSwitch.Show = function () {
        if (!this.Canvas.getContext) {
            return;
        }
        ImageSwitch.Current.CurWidth = 0;
        ImageSwitch.Current.CurHeight = 0;
        this.Canvas.getContext("2d").drawImage(this.Images[this.NextImageIndex], 0, 0);
        this.NextImageIndex = (this.NextImageIndex + 1) % this.Images.length;
        this.DrawImage();
    }
    ImageSwitch.DrawImage = function () {
        var _ctx = this.Canvas.getContext("2d");
        var _imageSW = this.Canvas.width / this.WidthCount;
        var _imageSH = this.Canvas.height / this.HeightCount;
        var _imageSX = _imageSW * this.Current.CurWidth;
        var _imageSY = _imageSH * this.Current.CurHeight;
        _ctx.drawImage(this.Images[this.NextImageIndex], _imageSX, _imageSY, _imageSW, _imageSH, _imageSX, _imageSY, _imageSW, _imageSH);

        if (this.isHeightType) {
            this.Current.CurHeight = (this.Current.CurHeight + 1) % this.HeightCount;
            if (this.Current.CurHeight == 0) {
                this.Current.CurWidth = (this.Current.CurWidth + 1) % this.WidthCount;
            }
        } else {
            this.Current.CurWidth = (this.Current.CurWidth + 1) % this.WidthCount;
            if (this.Current.CurWidth == 0) {
                this.Current.CurHeight = (this.Current.CurHeight + 1) % this.HeightCount;
            }
        }

        if (this.Current.CurWidth == 0 && this.Current.CurHeight == 0) {
            this.NextImageIndex = (this.NextImageIndex + 1) % this.Images.length;
            setTimeout(function () { ImageSwitch.DrawImage(); }, this.ShowTime - (this.SwitchTime / (this.WidthCount * this.HeightCount)));
        } else {
            setTimeout(function () { ImageSwitch.DrawImage(); }, this.SwitchTime / (this.WidthCount * this.HeightCount));
        }
    }

    function ChangeType() {
        ImageSwitch.isHeightType = !ImageSwitch.isHeightType;
    }
</script>
</head>
<body>
    <div>
        <canvas id="CanvasSwitch" width="275" height="200"></canvas>
    </div>
    <div><input type="button" value="切换显示方式(水平/垂直)" onclick="ChangeType()" /></div>
    <div id="msg"></div>
</body>
</html>
